@charset "utf-8";
@import "common/common";

header{
    width: 100%;
    height: r(75);
    background: white;
    position: absolute;
    top: 0;
    left: 0;
    .title{
        width: 100%;
        height: 100%;
        li{
            float: left;
            width: 50%;
            height: r(72);
            text-align: center;
            line-height: r(72);
            a{
                display: block;
                @include img();
                font-size: r(30);
                color: rgba(0,0,0,.9);
            }
            &:hover,&.active{
                border-bottom:r(3) solid #333333 ;
            }
        }
    }
}

section{
    position: absolute;
    top: r(75);
    bottom: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    .recruit{
        width: 100%;
        a{
            color: white;
            font-size: r(30);
            text-align: center;
            display: block;
            &:hover{
                color: white;
                text-decoration: none;
            }
        }
        .musicJop{
            width: r(640);
            height: r(158);
            background: url(../img/annou/annou1.jpg) no-repeat;
            background-size:r(640) r(158) ;
            line-height: r(158);
        }
        .SM{
            width: 100%;
            margin-top: r(2);
            .movie{
                margin-right: r(3);
                .child{
                    width: r(286);
                    height: r(135);
                    background: url(../img/annou/annou2.jpg) no-repeat;
                    background-size:r(286) r(135) ;
                    line-height: r(135);
                    margin-bottom: r(2);
                }
                .spit{
                    width: r(286);
                    height: r(131);
                    background: url(../img/annou/annou3.jpg) no-repeat;
                    background-size:r(286) r(131) ;
                    line-height: r(131);
                }
            }
            .model{
                width:r(351);
                height: r(268);
                background: url(../img/annou/annou4.jpg) no-repeat;
                background-size:r(351) r(268) ;
                line-height: r(268);
            }
        }
    }
    .found{
        width: 100%;
        height: r(152);
        background: white;
        li{
            float: left;
            width: 25%;
            height: 100%;
            a{
                display: block;
                @include img();
                text-align: center;
                font-size: r(20);
                color: rgba(0,0,0,.9);
                overflow: hidden;
                 &:hover{
                    color: rgba(0,0,0,.9);
                    text-decoration: none;
                }
                img{
                    display: block;
                    margin:r(24) auto 0;
                }
            }
            &:nth-child(1){
                a{
                    img{
                        width: r(79);
                        height: r(76);
                    }
                }
            }
            &:nth-child(2),&:nth-child(3){
                a{
                    img{
                        width: r(75);
                        height: r(74);
                    }
                }
            }
            &:nth-child(4){
                a{
                    img{
                        width: r(80);
                        height: r(72);
                    }
                }
            }
        }
    }
    .navbar{
        width: 100%;
        height: r(60);
        margin-bottom: 0;
        min-height: r(60);
        .btn-group{
            width: 33.33%;
            height: 100%;
            float: left;
            button{
                width: 100%;
                height: 100%;
                border: none;
                background: #f2f2f2;
                font-size: r(24);
                color: rgba(0,0,0,.9);
                span{
                    border-top: r(8) dashed;
                    border-right: r(8) solid transparent;
                    border-left: r(8) solid transparent;
                }
            }
            ul{
               width: r(214);
               min-width: r(214);
               li{
                   a{
                       text-align: center;
                       font-size: r(24);
                   }
               }
            }
        }
    }
    article{
        width: 100%;
        a{
            display: block;
            text-align: center;
            color: #FFFFFF;
            overflow: hidden;
            &:hover{
                text-decoration: none;
                color: #FFFFFF;
            }
        }
        .job{
            width:r(640);
            height: r(299);
            position: relative;
            margin-bottom: r(8);
            &:nth-of-type(1){
                background: url(../img/annou/annou9.jpg) no-repeat;
                background-size:r(640) r(299) ;
            }
            &:nth-of-type(2){
                background: url(../img/annou/annou10.jpg) no-repeat;
                background-size:r(640) r(299) ;
            }
            &:nth-of-type(3){
                background: url(../img/annou/annou11.jpg) no-repeat;
                background-size:r(640) r(299) ;
            }
            &:nth-of-type(4){
                background: url(../img/annou/annou9.jpg) no-repeat;
                background-size:r(640) r(299) ;
            }
            &:nth-of-type(5){
                background: url(../img/annou/annou10.jpg) no-repeat;
                background-size:r(640) r(299) ;
            }
            &:nth-of-type(6){
                background: url(../img/annou/annou11.jpg) no-repeat;
                background-size:r(640) r(299) ;
            }
            p:nth-of-type(1){
                font-size: 0;
                margin-top: r(30);
                span{
                    display: inline-block;
                    width: r(60);
                    height: r(30);
                    line-height: r(30);
                    font-size: r(16);
                    border: r(1) solid #FFFFFF;
                    border-radius:10% ;
                    margin-right: r(10);
                }
            }
            p:nth-of-type(2){
                font-size: r(30);
                margin-top: r(12);
            }
            p:nth-of-type(3),p:nth-of-type(4){
                font-size: r(20);
                margin-top: r(10);
            }
            p:nth-of-type(5){
                margin-top: r(16);
                span{
                    display: inline-block;
                    width: r(194);
                    height: r(45);
                    background: rgba(0,0,0,.17);
                    font-size: r(27.69);
                    line-height: r(45);
                    border-radius: 5%;
                }
            }
            p:nth-of-type(6){
                font-size: r(18);
                margin-top: r(8);
            }
            .state{
                position: absolute;
                top: 0;
                right: 0;
                line-height: r(38);
                height: r(38);
                text-align: center;
                background: rgba(0,0,0,.45);
                border-radius: r(12);
                span{
                    padding-left: r(10);
                    padding-right: r(10);
                }
            }
        }
    }
}
footer{
    background: rgba(255,255,255,0);
}
